<template>
  <div class="dashboard">
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      :auto-fill="false"
      :bottomDistance=30
      :cancelable="false"
      ref="loadmore"
    >
      <div class="dashboard__bg"></div>
      <div
        class="dashboard__container pad-l-r-30"
        :style="{ minHeight: (wrapperHeight-100) + 'px' }"
      >
        <div class="headerinfo">
          <div class="headerinfo__times">{{currentTime.years}}<span>{{currentTime.week | weekFormat}}</span></div>
          <div class="headerinfo__userinfo">
            <span class="headerinfo__userinfo-name">{{userName}}</span>
            <span class="headerinfo__userinfo-department">{{deptName}}</span>
          </div>
        </div>
        <SmallTitlePanel className="shortcut">
          <ul class="shortcut__ul pad-t-b-40">
            <li class="shortcut__ul__item"><i class="icon bor-rad-5px shortcut01"></i><span>请假</span></li>
            <li class="shortcut__ul__item"><i class="icon bor-rad-5px shortcut02"></i><span>公告</span></li>
            <li class="shortcut__ul__item"><i class="icon bor-rad-5px shortcut03"></i><span>差旅费</span></li>
            <li class="shortcut__ul__item"><i class="icon bor-rad-5px shortcut04"></i><span>其他审批</span></li>
          </ul>
        </SmallTitlePanel>
        <!-- <div v-html="htmlCode">12123{{ htmlCode }}</div> -->
        <!-- {
        senderid: '1001A210000000003ZTW',
        content: '<div class="divtext">\n<span class="labeltext">单据日期：</span>\n<span class="normaltext">2018-12-10</span>\n</div>\n<div class="divtext">\n<span class="labeltext">报销人：</span>\n<span class="normaltext">李雅倩</span>\n</div>\n<div class="divtext">\n<span class="labeltext">交易类型：</span>\n<span class="normaltext">交通费报销单</span>\n</div>\n<div class="divtext">\n<span class="labeltext">币种：</span>\n<span class="normaltext">人民币</span>\n</div>\n<div class="divtext">\n<span class="labeltext">金额：￥</span>\n<span class="normaltext">33.00</span>\n</div>',
        sendername: '用友董宝元',
        title: '李雅倩提交交通费报销单264X201812100013，请审批！',
        msgid: '1001ZZ1000000000DW4L',
        priority: '5',
        isread: 'N',
        type: 'worklist',
        date: '2018-12-10 18:05:27',
        }, -->
        <SmallTitlePanel :title="auditingTitle">
          <ul class="notice pad-l-r-30">
            <li
              v-for="(item,key) in infoList"
              :key="key"
              @click="seeInfoDetails(item.taskid)"
            >
              <h6 class="title">{{item.title | fmtDeleteString('待审批')}}</h6>
              <!-- <p class="con">了规范公司会议管理、提高会议质量、会议期间需关闭电话或调制静音不得看报纸、杂志或做与会议内容不相干的事情... </p> -->
              <div class="info">
                <span :style="{color:auditingStateColor}">{{auditingState}}</span>
                <span>{{item.date}}</span>
              </div>
            </li>
          </ul>
        </SmallTitlePanel>
        <div
          class="noData"
          v-show="infoList.length==0"
        >
          <img
            src="@images/noData.png"
            alt="暂无数据"
          >
        </div>
        <!-- <SmallTitlePanel title="工作任务">
          <ul
            class="approvalSchedule pad-l-r-30"
            ref="approvalSchedule"
          >
            <li
              class="item"
              v-for="(item,key) in approvalScheduleList"
              :key="key"
            >
              <div class="img"><img src="@images/shortcut01.png" /></div>
              <div class="info">
                <div class="left flex">
                  <div class="top"><span class="name">{{item.name}}</span><span class="title">{{item.title}}</span></div>
                  <div class="down"><span class="con">{{item.con}}</span></div>
                </div>
                <div class="right flex">
                  <span class="time">{{item.time}} </span>
                  <span class="orderState">{{item.orderState}}</span>
                </div>
              </div>
            </li>
          </ul>
        </SmallTitlePanel> -->
      </div>
      <!-- <div class="svgTest">
      <icon-svg icon-class="target" />
      <icon-svg
        icon-class="head"
        svgColor="#09c"
        className="asd"
      />
    </div> -->
      <mt-popup
        v-model="popupVisible"
        popup-transition="popup-fade"
      >
        <div class="noticeInfoDetails">
          <h6 class="title">通知消息详情</h6>
          <p class="con">{{noticeInfoDetailsValue}}</p>
        </div>
      </mt-popup>
      <div class="seizASeat"></div>
    </mt-loadmore>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Message } from 'element-ui';
import dayjs from 'dayjs';
import SmallTitlePanel from '@/components/SmallTitlePanel/SmallTitlePanel.vue';

import { fmtDeleteString, weekFormat } from '@/utils';

const components = {
  SmallTitlePanel,
};

@Component({
  components, filters: { fmtDeleteString, weekFormat },
})
export default class Dashboard extends Vue {
  @Prop({ default: 'handling', type: String })
  auditingType!: string;

  @Prop({ default: '消息 | 待办', type: String })
  auditingTitle!: string;

  allLoaded: boolean = false; // 加载更多数据组件 是否还可以下拉 false 可以下拉 true 不可下拉

  htmlCode: string = '';

  approvalScheduleList: any[] = [];

  infoList: any[] = []; // 消息列表数据

  wrapperHeight: number = document.documentElement.clientHeight;

  isSuccessLoadTopFun: boolean = false;

  isSuccessLoadBottom: boolean = false;

  approvalScheduleLoadmoreIndex: number = 0; // 下拉次数 默认为0 请求时候  start = (index * 10) + 1    count = (index + 1) * 10

  popupVisible: boolean = false; // 是否显示通知消息详情的弹出层

  noticeInfoDetailsValue: string = '';

  currentTime: any = {
    years: dayjs().format('MM月DD日'),
    week: dayjs().day(),
  }; // 当前时间

  get userId() {
    return this.$store.getters.userId;
  }

  get deptName() {
    return this.$store.getters.deptName;
  }

  get userName() {
    return this.$store.getters.userName;
  }

  get groupId() {
    return this.$store.getters.groupId;
  }

  get auditingState() {
    if (this.auditingType === 'handled') {
      return '审批完成';
    }
    return '待审批';
  }

  get auditingStateColor() {
    if (this.auditingType === 'handled') {
      return '#0DBC79';
    }
    return '#FF5200';
  }

  selectData: string = '';

  seeInfoDetails(taskid: number) { // 查看消息的详情 的方法
    this.$store.dispatch('setMsgId', taskid);
    this.$store.dispatch('setBillType', this.$route.name);
    this.$router.push('documentDetails');
  }

  loadTopFun() { // 初始化数据(approvalScheduleList)的方法
    this.isSuccessLoadTopFun = false;
    this.getNoticeData(this.auditingType, 0).then((res: any) => {
      this.isSuccessLoadTopFun = true;
      const { data } = res;
      this.infoList = data;
      if (data.length !== 10) {
        this.allLoaded = true;
      } else {
        this.approvalScheduleLoadmoreIndex += 1;
      }
      (this.$refs.loadmore as any).onTopLoaded();
    }).catch(() => {
      this.isSuccessLoadTopFun = true;
      (this.$refs.loadmore as any).onTopLoaded();
    });
    setTimeout(() => {
      if (!this.isSuccessLoadTopFun) {
        (this.$refs.loadmore as any).onTopLoaded();
      }
    }, 20000);
  }

  loadTop() { // 下拉调取的方法
    this.loadTopFun();
  }

  loadBottom() { // 上拉调取的方法
    this.allLoaded = true;
    this.isSuccessLoadBottom = false;
    this.getNoticeData(this.auditingType, (this.approvalScheduleLoadmoreIndex + 1) * 10).then((res: any) => {
      this.isSuccessLoadBottom = true;
      const { data } = res;
      this.infoList = this.infoList.concat(data);
      if (data.length !== 10) {
        this.allLoaded = true;
      } else {
        this.allLoaded = false;
        this.approvalScheduleLoadmoreIndex += 1;
      }
      (this.$refs.loadmore as any).onBottomLoaded();
    }).catch((err: any) => {
      this.isSuccessLoadBottom = true;
      this.allLoaded = false;
      (this.$refs.loadmore as any).onBottomLoaded();
    });
    setTimeout(() => {
      if (!this.isSuccessLoadBottom) {
        (this.$refs.loadmore as any).onBottomLoaded();
      }
    }, 20000);
  }

  /**
   * 请求工作任务数据的方法 getNC63TaskList getMessageList
   * http://127.0.0.1:8080/getMessageList?userid=1001A21000000000033K&statuscode=N&type=1&date=2018-12-29&priority=0&start=1&count=100
   * var str = "aaabbbcccdddeeefff";
   * str = str.match(/aaa(\S*)fff/)[1];
   * alert(str);//结果bbbcccdddeee
   */
  getApprovalScheduleData(detail: string) {
    return new Promise((resolve) => {
      this.$api.getNC63TaskList(this.groupId, this.userId, detail)
        .then((res) => {
          resolve(res);
        });
    });
  }

  /**
   * 请求消息列表的方法
   * http://127.0.0.1:8080/getMessageList?statuskey=ishandled&statuscode=unhandled&condition=贾长平&type=1&startLine=0&count=10
    statuskey: string,
    statuscode: string,
    type: string, // handing  处理中 handed 处理完成 myApproval 我的审批
    startLine: number,
    count: number,
   */
  getNoticeData(statuscode: any = 'unhandled', startLine: number = 0, type: string = '1', count: number = 10, statuskey: string = 'ishandled') {
    return new Promise((resolve) => {
      this.$api.getMessageList(statuskey, statuscode, type, startLine, count)
        .then((res) => {
          resolve(res);
        });
    });
  }

  mounted() {
    this.$store.dispatch('setDocumentDetail');
    this.loadTopFun();
    // this.currentTime.years = dayjs().format('MM月DD日');
  }
}
</script>


<style lang="scss" scoped>
.dashboard {
  position: relative;
  font-size: 0.2rem;
  width: 100vw;
  overflow-x: hidden;
  height: 100vh;
  .seizASeat {
    height: 55px;
  }
  .noData {
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 2rem;
      height: 2rem;
    }
  }
  &__bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 3.9rem;
    background: url("../../assets/images/dashboard_bg.png") no-repeat;
    background-size: 100% 3.9rem;
  }
  &__container {
    padding-top: 0.4rem;
    .headerinfo {
      color: #fff;
      padding: 0.4rem 0;
      &__times {
        font-size: 0.48rem;
        margin-bottom: 0.1rem;
        span {
          margin-left: 0.1rem;
        }
      }

      &__userinfo {
        span {
          font-size: 0.24rem;
        }
        &-name {
          margin-right: 0.3rem;
        }
      }
    }
    .shortcut__ul {
      display: flex;
      justify-content: space-around;
      &__item {
        flex: 1 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: $color-666;
        font-size: 0.26rem;
        .icon {
          display: block;
          width: 0.8rem;
          height: 0.8rem;
          margin-bottom: 0.2rem;
          background: #21b2ff;
        }
        .shortcut01 {
          background: url("../../assets/images/shortcut01.png") no-repeat;
          background-size: 100% 100%;
        }
        .shortcut02 {
          background: url("../../assets/images/shortcut02.png") no-repeat;
          background-size: 100% 100%;
        }
        .shortcut03 {
          background: url("../../assets/images/shortcut03.png") no-repeat;
          background-size: 100% 100%;
        }
        .shortcut04 {
          background: url("../../assets/images/shortcut04.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .notice {
      li {
        padding-bottom: 0.2rem;
        border-bottom: 1px solid $color-fafafb;
        .title {
          font-size: 0.24rem;
          margin: 0.2rem 0;
        }
        .con {
          font-size: 0.24rem;
          line-height: 0.36rem;
          font-weight: 400;
          margin: 0.2rem 0;
          height: 0.64rem;
          text-overflow: ellipsis;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .info {
          display: flex;
          justify-content: space-between;
          color: $color-999;
        }
      }
    }
    .approvalSchedule {
      .item {
        padding: 0.2rem 0;
        border-bottom: 1px solid $color-fafafb;
        display: flex;
        justify-content: space-between;
        .img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.2rem;
          img {
            width: 100%;
          }
        }
        .info {
          flex: 1 0;
          display: flex;
          justify-content: space-between;
          .flex {
            flex-direction: column;
            justify-content: space-around;
          }
          .left {
            flex: 4 0;
            overflow: hidden;
            .top {
              font-size: 0.24rem;
            }
            .down {
              font-size: 0.24rem;
              color: $color-999;
              overflow: hidden;
              max-width: 4rem;
              .con {
                white-space: nowrap;
                overflow: hidden;
              }
            }
          }
          .right {
            flex: 1 0;
            text-align: right;
            .time {
              color: $color-999;
              font-size: 0.24rem;
            }
            .orderState {
              font-size: 0.24rem;
              color: #18b2ff;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
  .svgTest {
    border: 1px solid red;
    .asd {
      color: red;
      width: 3.6em;
      height: 3.6em;
    }
  }
  .mint-popup {
    border-radius: 0.1rem;
    .noticeInfoDetails {
      width: 4.4rem;
      padding: 0 0.2rem;
      .title {
        text-align: center;
        padding: 0.2rem;
        font-size: 0.3rem;
        border-bottom: 1px solid #ddd;
      }
      .con {
        text-indent: 2em;
        padding: 0.3rem 0;
        font-size: 0.24rem;
      }
    }
  }
}
</style>
